<template>
  <div class="contact-pop">
    <div class="c-item" @click="showWx" title="微信客服">
      <mi-svg-icon name="wx" />
    </div>
    <!-- <div class="c-item" @click="scrollTop"><mi-svg-icon name="up" /></div> -->
    <WxModal ref="wxModal" />
  </div>
</template>

<script setup lang="ts">
import WxModal from "@/components/WxModal/index.vue";
import { ref } from "vue";

const wxModal = ref<null | InstanceType<typeof WxModal>>(null);

// 展示微信
const showWx = () => {
  wxModal.value?.showModal();
};
</script>

<style>
.contact-pop {
  position: fixed;
  right: 0;
  top: 45%;
  z-index: 900;
  .c-item {
    position: relative;
    width: 42px;
    height: 42px;
    border: 1px solid #e6e6e6;
    background-color: #fff;
    text-align: center;
    margin-top: -1px;
    color: #000;
    font-size: 20px;
    line-height: 42px;
    transition: all 0.3s;
    cursor: pointer;

    &:hover {
      background-color: #000;
      color: #fff;
      border-color: #000;
    }
  }
}
</style>
